<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加音乐</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<link rel="stylesheet" type="text/css" href="{$_W['siteroot']}addons/hr_album/style/component/layui/css/layui.css" media="all">
	<style>
.layui-form-pane .layui-form-label {
    min-width: 200px;
}
.layui-form-pane .layui-input-block {
    margin-left: 200px;
}
.demoimg,#logoimg{
	width: 38px;height: 38px; margin-left: 10px;display:none;
}
.demoimg img,#logoimg img{width: 100%; border-radius: 5px;height: 100%;}
	</style>
</head>
<body>
<form class="layui-form layui-form-pane" style="padding:20px;" action="{php echo url('site/entry/addmusic', array('m' => 'hr_album'));}" method="post">
<input type="hidden" name="id" value="{$music['id']}">
  <div class="layui-form-item">
    <label class="layui-form-label">歌曲名称：</label>
    <div class="layui-input-block">
      <input type="text" name="musictitle"  lay-verify="required" value="{$music['title']}"  placeholder="请输入歌曲名称，十个字符以下最佳" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">歌手：</label>
    <div class="layui-input-block">
      <input type="text" name="singer"  lay-verify="required"  value="{$music['singer']}" placeholder="请输入歌手名字，十个字符以下最佳" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
          <label class="layui-form-label">选择音乐分类</label>
          <div class="layui-input-block">
            <select name="musictype" lay-verify="required">
              {loop $cate $item}
              	<option value="{$item['id']}" {if $item['id'] == $music['type']}selected{/if}>{$item['title']}</option>	
              {/loop}			  
            </select>
          </div>
        </div>
  <div class="layui-form-item">
    <label class="layui-form-label">音频链接</label>
    <div class="layui-input-block">
      <input id="bgmusic" style="width:50%;float:left" type="text" name="musicurl" value="{$music['music']}"  placeholder="选择上传的音频文件或直接输入URL地址，常用格式：mp3 " autocomplete="off" class="layui-input">
        <!--<input style="float:left" lay-type="audio" type="file" name="file" id="ewm" class="layui-upload-file">-->
        <button id="audiolink" type="button" style="float:left;margin-left:5px;margin-right:5px;" class="layui-btn layui-btn-normal">获取音乐外链</button>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="layui-form">立即提交</button>
        <input type="hidden" name="token" value="{$_W['token']}" />
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <script type="text/javascript" src="{$_W['siteroot']}addons/hr_album/style/js/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="{$_W['siteroot']}addons/hr_album/style/component/layui/layui.js"></script>
  <script type="text/javascript">
  layui.use(['form','upload'],function(){
      var form = layui.form();
      layui.upload({
            url: '{$_W['siteroot']}web/index.php?c=site&a=entry&do=setaudio&m=hr_album',
            type:'audio',
            success: function(res){
                layer.msg('音乐上传成功');
                $("#bgmusic").val(res.src);
              console.log(res); //上传成功返回值，必须为json格式
            }
          });
  });
  $("#audiolink").on('click',function(){
      layui.use('layer', function(){
          layer.open({
                type: 2,
                title: '搜索音乐',
                content: '{$_W['siteroot']}web/index.php?c=site&a=entry&do=seachmusic&m=hr_album',
                area: ['600px', '600px'],
              });
      });
  });
  </script>
  </body>
  </html>